<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>购物车页面</title>
	<link rel="stylesheet" href="../frontDesk/css/base.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_common.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_header.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_gouwuche.css" type="text/css" />
    <script type="text/javascript" src="../frontDesk/js/jquery.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/topNav.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/jquery.goodnums.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/shop_gouwuche.js" ></script>
</head>
<body>
		<!-- Header  -wll-2013/03/24 -->
	<div class="shop_hd">
		<!-- Header TopNav -->
		<div class="shop_hd_topNav">
			<div class="shop_hd_topNav_all">
				<!-- Header TopNav Left -->
				<div class="shop_hd_topNav_all_left">
					<p>您好，欢迎来到<b><a href="/">ShoopNC商城</a></b>[<a href="">登录</a>][<a href="">注册</a>]</p>
				</div>
				<!-- Header TopNav Left End -->

				<!-- Header TopNav Right -->
				<div class="shop_hd_topNav_all_right">
					<ul class="topNav_quick_menu">

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的商城<i></i></a>
								<div class="topNav_menu_bd" style="display:none;" >
						            <ul>
						              <li><a title="已买到的商品" target="_top" href="#">已买到的商品</a></li>
						              <li><a title="个人主页" target="_top" href="#">个人主页</a></li>
						              <li><a title="我的好友" target="_top" href="#">我的好友</a></li>
						            </ul>
						        </div>
							</div>
						</li>
                                                <li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">卖家中心<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">购物车<b>0</b>种商品<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
									<!--
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        	-->
						            <p>还没有商品，赶快去挑选！</p>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的收藏<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="收藏的商品" target="_top" href="#">收藏的商品</a></li>
						              <li><a title="收藏的店铺" target="_top" href="#">收藏的店铺</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#">站内消息</a>
							</div>
						</li>

					</ul>
				</div>
				<!-- Header TopNav Right End -->
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
		<!-- Header TopNav End -->

	</div>
	<div class="clear"></div>
	<!-- 面包屑 注意首页没有 -->
	<div class="shop_hd_breadcrumb">
		<strong>当前位置：</strong>
		<span>
			<a href="">首页</a>&nbsp;›&nbsp;
			<a href="">我的商城</a>&nbsp;›&nbsp;
			<a href="">我的购物车</a>
		</span>
	</div>
	<div class="clear"></div>
	<!-- 面包屑 End -->

	<!-- Header End -->
	
	<!-- 购物车 Body -->
	<div class="shop_gwc_bd clearfix">
		<!-- 在具体实现的时候，根据情况选择其中一种情况 -->
		<!-- 购物车为空 -->
			<div class="empty_cart mb10" id="cart-none">
				<div class="message">
					<p>购物车内暂时没有商品，您可以<a href="index.html">去首页</a>挑选喜欢的商品</p>
				</div>
			</div>
		<!-- 购物车为空 end-->
		
		<!-- 购物车有商品 -->
		<div class="shop_gwc_bd_contents clearfix" id="cart-not-none">
			<!-- 购物流程导航 -->
			<div class="shop_gwc_bd_contents_lc clearfix">
				<ul>
					<li class="step_a hover_a">确认购物清单</li>
					<li class="step_b">确认收货人资料及送货方式</li>
					<li class="step_c">购买完成</li>
				</ul>
			</div>
			<!-- 购物流程导航 End -->

			<!-- 购物车列表 -->
			<table>
				<thead>
					<tr>
						<th colspan="2"><span>商品</span></th>
						<th><span>单价(元)</span></th>
						<th><span>数量</span></th>
						<th><span>小计</span></th>
						<th><span>操作</span></th>
					</tr>
				</thead>
				<tbody id="cart-list">
					<tr>
						<td class="gwc_list_pic"><a href=""><img src="../frontDesk/images/4_7b5239c3f153ae4b67ff760f54408a5b.jpg_tiny.jpg" /></a></td>
						<td class="gwc_list_title"><a href="">双层花架简约韩式田园欧式地中海风格宜家纯白架现代花盆架电话架 </a></td>
						<td class="gwc_list_danjia"><span>￥<strong id="danjia_001">2550.00</strong></span></td>
						<td class="gwc_list_shuliang"><span><a class="good_num_jian this_good_nums" did="danjia_001" xid="xiaoji_001" ty="-" valId="goods_001" href="javascript:void(0);">-</a><input type="text" value="1" id="goods_001" class="good_nums" /><a href="javascript:void(0);" did="danjia_001" xid="xiaoji_001" ty="+" class="good_num_jia this_good_nums" valId="goods_001">+</a></span></td>
						<td class="gwc_list_xiaoji"><span>￥<strong id="xiaoji_001" class="good_xiaojis">2550.00</strong></span></td>
						<td class="gwc_list_caozuo"><a href="">收藏</a><a href="javascript:void(0);" class="shop_good_delete">删除</a></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="6">
							<div class="gwc_foot_zongjia">商品总价(含运费)<span>￥<strong id="good_zongjia">12750.00</strong></span></div>
							<div class="clear"></div>
							<div class="gwc_foot_links">
								<a href="/frontDesk/index.html" class="go">继续购物</a>
								<a href="/frontDesk/flow2.html" class="op">确认并填写订单</a>
							</div>
						</td>
					</tr>
				</tfoot>
			</table>
			<!-- 购物车列表 End -->
		</div>
		<!-- 购物车有商品 end -->

	</div>
	<!-- 购物车 Body End -->

	<!-- Footer - wll - 2013/3/24 -->
	<div class="clear"></div>
	<div class="shop_footer">
            <div class="shop_footer_link">
                <p>
                    <a href="">首页</a>|
                    <a href="">招聘英才</a>|
                    <a href="">广告合作</a>|
                    <a href="">关于ShopCZ</a>|
                    <a href="">关于我们</a>
                </p>
            </div>
            <div class="shop_footer_copy">
                <p>Copyright 2004-2013 itcast Inc.,All rights reserved.</p>
            </div>
        </div>
	<!-- Footer End -->

</body>

<script type="text/javascript">

	// 页面加载完成函数
	$(function () {
		$.get("/cart/select_cart_all.shtml", function (json) {
			console.log(json);
			if(json.code == 200){
				// 有数据，将没有数据模块隐藏
				$("#cart-none").hide();
				$("#cart-list").empty();
				var sumPrice = 0;
				// 遍历结果
				for(var i=0;i<json.data.length;i++){
					var tr = '<tr>' +
							'<td class="gwc_list_pic"><a href=""><img width="100px" height="100px" src="..'+json.data[i].product.imgUrl+'" /></a></td>' +
							'<td class="gwc_list_title"><a href="">'+json.data[i].product.description+'</a></td>' +
							'<td class="gwc_list_danjia"><span>￥<strong id="danjia_001">'+json.data[i].product.price+'</strong></span></td>' +
							'<td class="gwc_list_shuliang"><span><input type="text" readonly="readonly" value="'+json.data[i].pNumber+'" id="goods_001" class="good_nums" /></span></td>' +
							'<td class="gwc_list_xiaoji"><span>￥<strong id="xiaoji_001" class="good_xiaojis">'+json.data[i].price+'.00</strong></span></td>' +
							'<td class="gwc_list_caozuo"><a href="javascript:void(0);" onclick="deleteCart('+json.data[i].id+')" class="shop_good_delete">删除</a></td>' +
							'</tr>';
					$("#cart-list").append(tr);
					sumPrice = sumPrice + json.data[i].price;
				}
				$("#good_zongjia").text(sumPrice + ".00");

			}else{
				// 没有数据，将有数据部分隐藏
				$("#cart-not-none").hide();
			}
		}, "json");
	});

	// 删除购物车数据
	function deleteCart(id) {
		$.post("/cart/del_cart_by_id.shtml", {id: id}, function (json) {
			if(json.code == 200){
				location.reload();
			}else{
				alert("删除失败，请稍后再试");
			}
		}, "json");
	}

</script>

</html>